<template>
	<view class="smain">
		<!-- 竞品评价 -->
		<view class="table">

			<view class="tabHead">
				<view class="left">
					<div class="top">
						<view class="tit">项目</view>
					</div>
					<div class="bot">
						<view class="p p1">样品 编号</view>
						<view class="p p2">牌别</view>
					</div>
				</view>
				<view class="list">
					<view class="item" v-for="(item,index) in tabHead" :key="item">
						<view class="top">
							<view class="tit">{{item}}</view>
						</view>
						<view class="box">
							<view class="i">Ⅰ</view>
							<view class="i">Ⅱ</view>
							<view class="i">Ⅲ</view>
							<view class="i">
								{{index==0?5:index==1?32:index==2?6:index==3?12:index==4?20:index==5?25:'-'}}</view>
							<view class="i">
								{{index==0?4:index==1?28:index==2?5:index==3?10:index==4?17:index==5?22:'-'}}</view>
							<view class="i">{{index==0?3:index==1?24:index==2?4:index==3?8:index==4?15:index==5?20:'-'}}
							</view>
						</view>
					</view>

				</view>
				<view class="right">
					<div class="top">
						<view class="tit" style="text-align: right;padding-right: 1rpx;">合计</view>
					</div>
				</view>
			</view>


			<uni-table class="tableData noT" :stripe="false" emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr style="display: block; height: 0px;overflow: hidden;">
					<uni-th width="139rpx" style="" class="cFont" align="center"></uni-th>
					<uni-th width="74.77rpx" style="" class="cFont" align="center"></uni-th>
					<uni-th width="74.77rpx" style="" class="cFont" align="center"></uni-th>
					<uni-th width="74.77rpx" style="" class="cFont" align="center"></uni-th>
					<uni-th width="74.77rpx" style="" class="cFont" align="center"></uni-th>
					<uni-th width="74.77rpx" style="" class="cFont" align="center"></uni-th>
					<uni-th width="74.77rpx" style="" class="cFont" align="center"></uni-th>
					<uni-th width="auto" style="" class="cFont" align="center"></uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item,index) in tableData" :key="item.id">
					<uni-td>
						<view class="td">{{item.smokeModel}}</view>
					</uni-td>

					<uni-td>
						<view class="td">
							<input class="transparent-input" @input="change" :data-index="index"
								v-model="item.meetingCompetitorsCorrelationRep.smokeGloss"></input>
						</view>
					</uni-td>
					<uni-td>
						<view class="td">
							<input class="transparent-input" @input="change" :data-index="index"
								v-model="item.meetingCompetitorsCorrelationRep.smokeAroma"></input>
						</view>
					</uni-td>
					<uni-td>
						<view class="td">
							<input class="transparent-input" @input="change" :data-index="index"
								v-model="item.meetingCompetitorsCorrelationRep.smokeHarmony"></input>
						</view>
					</uni-td>
					<uni-td>
						<view class="td">
							<input class="transparent-input" @input="change" :data-index="index"
								v-model="item.meetingCompetitorsCorrelationRep.smokeImpure"></input>
						</view>
					</uni-td>
					<uni-td>
						<view class="td">
							<input class="transparent-input" @input="change" :data-index="index"
								v-model="item.meetingCompetitorsCorrelationRep.smokeThrill"></input>
						</view>
					</uni-td>
					<uni-td>
						<view class="td">
							<input class="transparent-input" @input="change" :data-index="index"
								v-model="item.meetingCompetitorsCorrelationRep.smokeAftertaste"></input>
						</view>
					</uni-td>
					<uni-td>
						<view class="td">
							<input class="transparent-input" v-model="item.meetingCompetitorsCorrelationRep.smokeTotal"
								@input="change" :data-index="index" disabled></input>
						</view>
					</uni-td>
				</uni-tr>

			</uni-table>


		</view>


		<view class="btns">
			<view class="btn" @click="submit">提交</view>
			<!-- <view class="btn">选中效果</view> -->
		</view>
	</view>
</template>

<script>
	import ryfStep from "@/components/ryf-step/step.vue"
	import {
		getMMC
	} from "@/api/correlation.js"
	import {
		getMeetingCompetitors,
		meetingCompetitorsCorrelation
	} from "@/api/tPoint.js"
	import request from '@/utils/request.js'
	export default {
		components: {
			ryfStep
		},
		props: {
			id: {
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {
				tabHead: [
					'光泽 5', '香气 32', '谐调 6', '杂气 12', '刺激性 20', '余味 25',
				],
				tableData: [],
				tableHeadData: []

			}
		},
		methods: {
			getData() {
				this.tableData = [];
				this.tableHeadData = [];
				getMeetingCompetitors({
					allId: this.id
				}).then(res => {
					if (res.code == 200) {
						const data = res.data || [];
						data.forEach(item => {
							if (item.status == '0') {
								this.tableHeadData.push(item)
							} else {
								this.tableData.push(item)
							}

						})

						console.log(this.tableHeadData)

					}

				})

			},
			async change(e) {
				console.log(e)

				const index = JSON.parse(e.target.dataset.index)

				const data = this.tableData[index].meetingCompetitorsCorrelationRep

				let a = data.smokeAftertaste ? data.smokeAftertaste : 0
				let b = data.smokeAroma ? data.smokeAroma : 0
				let c = data.smokeGloss ? data.smokeGloss : 0
				let d = data.smokeHarmony ? data.smokeHarmony : 0
				let f = data.smokeImpure ? data.smokeImpure : 0
				let g = data.smokeThrill ? data.smokeThrill : 0


				data.smokeTotal = a * 1 + b * 1 + c * 1 + d * 1 + f * 1 + g * 1
 

				if (data.status == '1') {
					uni.showToast({
						title: '已提交的数据不能修改',
						icon: 'none',
						mask: true
					})

					await this.getData()
					return false
				}

				meetingCompetitorsCorrelation({
					loading: false,
					...data
				}).then(res => {
					if (res.code == 200) {
						// uni.showToast({title: '修改成功',	icon: 'none',mask: true})
					}

				})

			},
			async submit() {



				// 查询填写是否完整
				let isFull = true
				this.tableData.forEach(item => {
					const e = item.meetingCompetitorsCorrelationRep
					if (!e.smokeAftertaste || !e.smokeAroma || !e.smokeGloss || !e.smokeHarmony || !e
						.smokeImpure || !e.smokeThrill) {
						isFull = false
						console.log(item);
					}
				})
				console.log(isFull);

				if (!isFull) {
					uni.showToast({
						title: '请检查您的输入是否完整',
						icon: 'none',
						mask: true
					})

					return false
				}






				this.$emit('c_submit', '竞品评价');
				// this.$emit('update:Index', 1);

				const res = await request.put('/ipad/meetingCompetitorsCorrelation/submit/' + this.id, {
					allId: this.id
				})
				console.log(res);
				await this.getData()
			},
		},
		mounted() {

			console.log(this.id)
			this.getData()

		}
	}
</script>

<style lang="scss" scoped>
	.cFont {

		color: #27B186;
		font-size: 11rpx;
	}

	.btns {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 86rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.btn {
			width: 116rpx;
			height: 26rpx;
			border-radius: 3.84rpx;
			text-align: center;
			line-height: 26rpx;
			font-size: 11rpx;
			font-weight: bold;
			color: #FFFFFF;
			background-image: url(../../../static/Rectangle24.png);
			background-size: cover;
			cursor: pointer;

			&:hover {
				opacity: 0.5;
			}

			&:last-child {
				background-image: url(../../../static/Rectangle113.png);
				margin-left: 41rpx;
			}
		}
	}

	.tabHead {
		height: 80rpx;
		background: #F3FFF9;
		border-radius: 3rpx 3rpx 3rpx 3rpx;
		opacity: 1;
		padding: 7rpx 9rpx;
		display: flex;

		.tit {
			font-size: 11rpx;
			font-weight: bold;
			color: #6C9789;
		}

		.top {
			height: 17rpx;
			line-height: 17rpx;
		}

		.bot {
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;
		}

		.p {
			font-size: 11rpx;
			color: #999999;
			line-height: 13rpx;
		}

		.left {
			width: 148rpx;

			.top {
				margin-bottom: 14rpx;
			}

			.bot {
				align-items: center;

				.p1 {
					width: 22rpx;
					margin-right: 27rpx;
				}
			}
		}

		.list {
			flex: 1;
			display: flex;
			flex-wrap: wrap;

			.top {
				margin-bottom: 8rpx;
				text-align: center;
			}

			.item {
				width: 16.6666%;

				.box {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;

					.i {
						width: 18rpx;
						height: 18rpx;
						background: #FFFFFF;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						font-size: 11rpx;
						line-height: 18rpx;
						text-align: center;
						color: #999999;
						font-weight: 400;
						margin-right: 4rpx;
						margin-bottom: 2rpx;

						&:nth-child(3n) {
							margin-right: 0;
						}
					}
				}
			}
		}

		.right {
			width: 70rpx;
		}


	}
</style>